<template>
  <div class="app">
    <el-backtop target=".app" :right="20" :bottom="35">
      <div>
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
    <el-container>
      <div class="aside" :class="{ asideActive: isCollapse }">
        <adminMain
          :isCollapse="isCollapse"
          :navConfig="navConfig"
          :openeds="openeds"
          :activeNav="activeNav"
        ></adminMain>
      </div>
      <el-container class="main" :class="{ mainActive: isCollapse }">
        <el-header style="height: 55px">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button class="fold" :label="false" v-show="isCollapse"
              ><i class="iconfont icon-icons_unflod" style="font-size: 18px"></i
            ></el-radio-button>
            <el-radio-button class="fold" :label="true" v-show="!isCollapse"
              ><i class="iconfont icon-icons_flod" style="font-size: 18px"></i
            ></el-radio-button>
          </el-radio-group>
          <el-breadcrumb
            separator="/"
            :class="{ breadcrumbActive: isCollapse }"
          >
            <el-breadcrumb-item :to="{ path: '/admin' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in $route.meta.content"
              :key="index"
            >
              <span v-if="index != 0">{{ item }}</span>
              <router-link
                v-else
                :to="{ path: $route.path, query: { t: Date.now() } }"
                >{{ item }}</router-link
              >
            </el-breadcrumb-item>
          </el-breadcrumb>
          <el-row class="userName block-col-2">
            <el-col>
              <span class="welcome">{{ date_type }} {{ username }}</span>
              <el-dropdown @command="handleCommand" trigger="click">
                <el-avatar
                  :size="45"
                  :src="avatar"
                  v-if="avatar"
                  style="cursor: pointer"
                ></el-avatar>
                <el-avatar
                  :size="45"
                  :src="avatar_src"
                  v-else
                  style="cursor: pointer"
                ></el-avatar>
                <el-dropdown-menu slot="dropdown" class="dropdown">
                  <el-dropdown-item command="personCenter">
                    <i class="el-icon-set-up"></i> 个人中心</el-dropdown-item
                  >
                  <el-dropdown-item command="login_out">
                    <i class="el-icon-s-promotion"></i>
                    退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import adminMain from "@/components/adminMain/adminMain.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    adminMain,
  },
  data() {
    return {
      openeds: ["1"],
      isCollapse: false,
      navConfig: {
        main: "1",
        adminPerson: "2-1",
        adminCommon: "2-2",
        businessFirm: "3-1",
        successFirm: "3-2",
        failFirm: "3-3",
        adminPosts: "4-1",
        adminPlate: "4-2",
        adminJob: "5",
      },
      avatar_src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      date_type: "您好",
      user: "",
      activeNav: "1",
    };
  },
  methods: {
    changeRoute() {
      var _this = this;
      var href = window.location.href;
      href = href.split("/admin/")[1];
      if (href && href.indexOf("?") != -1) href = href.split("?")[0];
      _this.activeNav = _this.navConfig[href];
    },
    handleCommand(command) {
      switch (command) {
        case "login_out":
          this.$router.push(
            { path: "/login" },
            (onComplete) => {},
            (onAbort) => {}
          );
          this.$store.dispatch("user/login_out");
          break;
        case "personCenter":
          this.$router.push(
            { path: "/admin/personCenter" },
            (onComplete) => {},
            (onAbort) => {}
          );
          break;
        default:
          break;
      }
    },
  },
  mounted() {
    this.changeRoute();
  },
  watch: {
    //监听路由变化
    $route(to, from) {
      this.changeRoute();
    },
  },
  computed: {
    ...mapGetters(["username", "authority", "avatar"]),
  },
};
</script>
<style lang="scss">
@import "@/assets/css/admin_y.scss";
.app {
  height: 100vh;
  overflow-x: hidden;
}
</style>